<template>
    <div class="header">
        <el-tabs v-model="activePane" @tab-remove="removeTab">
            <el-tab-pane label="当日指标报告" name="1">
                <IndexReportList key="today" type="today" @handelOperate="handelOperate" />
            </el-tab-pane>
            <el-tab-pane label="历史指标报告" name="2">
                <IndexReportList key="history" type="history" @handelOperate="handelOperate" />
            </el-tab-pane>
            <el-tab-pane v-for="item in panes" :key="item.key" :name="item.key" closable>
                <span slot="label"><i class="el-icon-discover"></i>{{ item.title }} </span>
                <InstReportDetail :staticResult="staticResult" :history="history" style="padding: 20px"></InstReportDetail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import InstReportDetail from '@/pages/risk-time/invest-manage/Inst-report-detail.vue';
import { Component, Vue } from 'vue-property-decorator';
import IndexReportList from './index-report/index-report-list.vue';

@Component({ name: 'IndexReport', components: { IndexReportList, InstReportDetail } })
export default class IndexReport extends Vue {
    activePane: string = '1';

    // 所有tabs标签页
    panes: any[] = [];
    staticResult: any = {};

    mounted() {
        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    handelOperate({ record, history, clickRecord }): void {
        let parentRecord = clickRecord;
        let key = String(record.entryCode);

        // let key = String(record.resultId + '-' + record.entryCode);
        for (let i = 0; i < this.panes.length; i++) {
            if (this.panes[i].key === key) {
                this.activePane = key;
                return;
            }
        }
        this.panes.push({ title: key, key: key });
        this.activePane = key;
        this.staticResult = record;
    }

    // 移除tabs
    removeTab(targetKey: string): void {
        let lastIndex;
        this.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        this.panes = this.panes.filter(pane => pane.key !== targetKey);
        if (this.panes.length && this.activePane === targetKey) {
            if (lastIndex >= 0) {
                this.activePane = this.panes[lastIndex].key;
            } else {
                this.activePane = this.panes[0].key;
            }
        }
        if (this.panes.length === 0) {
            this.activePane = '2';
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../style/cmschina.scss';

.header {
    min-width: 1390px;
    padding-top: 4px;
    height: 100%;
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    // border: 1px solid #e4e7ed;
    // border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs {
    height: 100%;
    .el-tabs__nav {
        // border: none;
        // .is-active {
        //     border-color: #409eff;
        //     border-bottom: 2px solid #409eff;
        // }
    }
    .el-tabs__content {
        // padding: 20px;
        height: calc(100% - 35px);
        overflow: auto;
        .el-tab-pane {
            color: #333;
            height: 100%;
        }
    }
}

/deep/ .el-form .el-form-item__label {
    color: #333;
    padding: 0px;
}
/deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px !important;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}
// /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(-n + 2) .el-icon-close {
//     display: none;
// }
</style>
